<template>
    <div class="login_page_class">

        <transition>
            <section class="section_div_class">
                <div class="shadow_bg_class" style="width: 400px;height: auto;margin: 0 auto;padding: 28px">
                    <div style="font-weight: 600;font-size: 18px;color: #ffffff;text-align: center">
                        智慧化电气火灾预警系统
                    </div>

                    <el-form :model="loginForm" :rules="rules" ref="loginForm" style="margin-top: 30px;padding: 0 16px">

                        <el-form-item prop="username">
                            <el-input style="font-size: 16px;"
                                      prefix-icon="el-icon-user" v-model="loginForm.username"
                                      placeholder="用户名">
                            </el-input>
                        </el-form-item>

                        <el-form-item prop="password">
                            <el-input prefix-icon="el-icon-lock" style="font-size: 16px;margin-top: 8px "
                                      v-model="loginForm.password" @keyup.enter.native="submitForm"
                                      placeholder="密码" show-password>
                            </el-input>
                        </el-form-item>


                        <el-row :gutter="20" v-if="codeKeyImg!=''">
                            <el-col :span="11">
                                <div class="grid-content bg-purple">
                                    <el-form-item prop="code">
                                        <el-input
                                                style="font-size: 16px;padding-left:6px "
                                                v-model="loginForm.code"
                                                placeholder="请输入验证码">
                                        </el-input>

                                    </el-form-item>
                                </div>
                            </el-col>
                            <el-col :span="13">
                                <div class="grid-content bg-purple"
                                     style="display: flex;padding-top: 2px;justify-content: flex-end;height: 36px;line-height: 36px;">
                                    <img :src="codeKeyImg" style="width: auto;height: 100%"
                                         @click="getKeyCode"></img>
                                    <div style="font-size: 14px;color: #333333;cursor: pointer;margin-left: 6px"
                                         @click="getKeyCode">
                                          <span
                                                  style="color: #409EFF">换一张</span></div>
                                </div>
                            </el-col>
                        </el-row>

                        <el-form-item style="margin-top: 32px">

                            <el-button type="primary"
                                       style="width: 100%;background: rgba(255, 255, 255, 0.18);border-color: rgba(255, 255, 255, 0.18);font-size: 16px"
                                       @click="submitForm('loginForm')"
                                       v-on:keyup.enter="submitForm('loginForm')"
                                       class="submit_btn">登录
                            </el-button>


                        </el-form-item>
                    </el-form>

                </div>
            </section>
        </transition>

    </div>
</template>
<script>
    import globalHelper from '../utils/globalHelper';
    import storageHelper from '../utils/storageHelper';

    export default {
        name: 'Login',
        data() {
            return {
                codeKeyImg: '',
                loginForm: {
                    username: '',
                    password: '',
                    code: '',
                    codeKey: ''
                },
                rules: {
                    username: [
                        {required: true, message: '请输入用户名', trigger: 'blur'},
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'}
                    ],
                }
            }
        },
        mounted() {
        },
        methods: {
            getKeyCode: function () {
                this.$store.dispatch('getKey', {}).then((res) => {
                    this.loginForm.codeKey = res.rs.codeKey;
                    this.codeKeyImg = this.$baseURL + '/code/image?codeKey=' + this.loginForm.codeKey;

                });
            },
            forgetPasswordOpt: function () {
                let that = this;
                that.$prompt('请输入账号', '找回密码', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }).then(({value}) => {
                    this.$store.dispatch('forgetPasswordReq', {username: value}).then((res) => {
                        this.$confirm('请查收短息', '提示', {
                            confirmButtonText: '确定',
                            type: 'success',
                            showCancelButton: false,
                            center: true
                        })
                    });

                }).catch(() => {
                    that.$message({
                        type: 'info',
                        message: '取消输入'
                    });
                });
            },
            submitForm() {
                let self = this;
                // storageHelper.set('userLoginInput', this.loginForm);

                globalHelper.formValidate(self, 'loginForm').then((valid) => {
                    if (valid) {
                        self.$store.dispatch('loginSen', Object.assign({}, this.loginForm)).then((res) => {

                            if (res.code == 0) {
                                this.$router.push('/home')
                            } else {
                                this.getKeyCode();

                            }

                        });
                    }
                })
            }
        }
    }

</script>

<style lang="less" scoped>

    .login_page_class {
        width: 100%;
        height: 100%;
        background-image: url(../assets/img/all_bg.png);
        background-size: 100% 100%;
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        transition: background .3s;
    }


    .section_div_class {
        padding-top: 12%;
    }

</style>

<style>
    .login_page_class .el-input__inner {
        border: unset;
        color: #ffffff;
        padding-left: 42px;
        height: 42px;
        line-height: 42px;
        background-color: rgba(255, 255, 255, 0.2) !important;
    }

    .login_page_class .el-input__icon {
        font-size: 18px !important;
        color: #ffffff;
    }

    .login_page_class .el-input__prefix {
        left: 12px

    }
</style>
